<template>
  <div class="li flex-al hover2" @click="toP(artistId)">
    <el-image class="img" :src="titleImg" fit="cover"></el-image>
    <div class="detail w100 flex-al detail-btn">
      <p class="name">{{ artistName }}</p>
      <p class="head-name">
        <el-image class="img-head" :src="picture" fit="cover"></el-image>
        <span class="author">
          {{ author }}
        </span>
      </p>
      <p class="piao">{{ ticketNumber }}票</p>
      <el-button type="primary" class="tp flex-al j-c">投票</el-button>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    titleImg: {
      type: String,
    },
    author: {
      type: String,
    },
    picture: {
      type: String,
    },
    artistName: {
      type: String,
    },
    companyName: {
      type: String,
    },
    artistPosition: {
      type: String,
    },
    ticketNumber: {
      type: Number,
    },
    artistId: {
      type: Number,
    },
  },
  methods: {
    toP(artistId) {
      console.log(this.artistId)
      this.toPeople(artistId)
    },
  },
}
</script>
<style lang="less" scoped>
.head-name {
  display: flex;
  align-items: center;
  width: 100%;
  .img-head {
    width: 26px;
    height: 26px;
    border-radius: 50%;
  }
  .author {
    color: #333;
    font-size: 14px;
    margin-left: 6px;
  }
}
.line-row {
  margin: 15px auto;
  width: 283px;
  margin-left: -15px;
  background: #f2f2f2;
}
.li {
  width: 163px;
  height: 259px;
  background: #ffffff;
  box-shadow: 0 0 18px 0 rgba(18, 27, 83, 0.07);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
  &:hover {
    box-shadow: none;
  }
  .img {
    width: 100%;
    height: 114px;
  }
  .detail-btn {
    /deep/ .el-button--primary {
      background-color: #222;
      border-color: #222;
      font-size: 13px;
    }
  }
  .detail {
    padding: 10px 15px;
    padding-top: 10px;
    padding-bottom: 20px;
    .name {
      text-overflow: ellipsis;
      white-space: nowrap;
      // text-align: center;
      width: 100%;
      font-size: 14px;
      color: #333333;
      margin-bottom: 5px;
      font-weight: bolder;
    }
    .zhiwei {
      width: 90%;
      text-align: center;
      font-size: 11px;
      color: #666666;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .piao {
      font-size: 14px;
      font-weight: bolder;
      color: #312d2d;
      padding-top: 15px;
      width: 100%;
      margin-top: 10px;
      text-align: center;
      border-top: 1px solid #f2f2f2;
      margin-bottom: 8px;
    }
    .tp {
      width: 100%;
      height: 32px;
    }
  }
}
</style>
